<!--  -->
<template>
  <div class="">
    <div class="wrap">
      <div class="comment">
        <div class="phtot"></div>
        <div @click="handleCollect">
          <van-icon name="star" size="40" color="#ffffff" class="icon-click" />
          <div>收藏</div>
        </div>
        <div>
          <van-icon
            name="chat"
            size="40"
            color="#ffffff"
            class="icon-click"
            @click="handleEvaluate"
          />
          <van-action-sheet v-model="show" title="评论" style="height: 60%">
            <van-list>
              <van-cell v-for="item in commentList" :key="item.id">
                <div class="commentItem">
                  <img :src="item.avatar" alt="" />
                  <div>
                    <div>{{ item.userName }}</div>
                    <div>{{ item.time }}</div>
                  </div>
                </div>
                <div>{{ item.content }}</div>
              </van-cell>
            </van-list>
          </van-action-sheet>
          <div>评价</div>
        </div>
        <div @click="handleCart">
          <van-icon name="cart" size="40" color="#ffffff" class="icon-click" />
          <div>购物车</div>
        </div>
      </div>
      <video :src="video" controls autoplay></video>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    //这里存放数据
    return {
      vodeo: {},
      show: false,
      commentList: [],
      Num: 0
    }
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    list (goodsId, anchorId) {
      this.$axios.get('/video/detail?', {
        params: { itemId: goodsId, actorId: anchorId }
      }).then((res) => {
        this.commentList = res.data.itemExplainList.map(v => v.comments).filter(Boolean)[this.Num]
        // console.log(this.commentList)
      })
    },
    handleCollect () {
      console.log("shouchang")
    },
    handleEvaluate () {
      console.log(this.Num)
      this.show = true
      console.log("pingjia")
    },
    handleCart () {
      console.log("gouwuche")
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created () {
    this.list()
    this.video = this.$route.params.videoUrl
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted () { },
  beforeCreate () { }, //生命周期 - 创建之前
  beforeMount () { }, //生命周期 - 挂载之前
  beforeUpdate () { }, //生命周期 - 更新之前
  updated () { }, //生命周期 - 更新之后
  beforeDestroy () { }, //生命周期 - 销毁之前
  destroyed () { }, //生命周期 - 销毁完成
  activated () { }, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
.wrap {
  // width: 100%;
  position: relative;
  border: 1px solid #000;

  video {
    width: 100vw;
    height: 100vh;
  }
  .comment {
    position: absolute;
    right: 20px;
    top: 270px;
    text-align: center;
    color: #fff;
    z-index: 10;
    .phtot {
      border: 1px solid #000;
      height: 40px;
      border-radius: 50%;
    }
    .icon-click {
      padding-top: 15px;
    }
    .commentItem {
      display: flex;
      align-items: center;
      img {
        margin-right: 12px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
      }
    }
  }
}
</style>